<template>
	<!-- 班级男女及格统计 -->
<div class="app-container">
    <el-form :model="queryParams" :rules="rules" ref="queryRef" :inline="true" label-width="68px">
	  
	  <el-form-item label="学校" prop="sjXxid">
	    <el-select v-model="queryParams.xxid" @change="schoolChange" placeholder="请选择学校" :disabled="isXxidFlag">
<!-- 	      <el-option
	        v-for="d in dept_self"
	        :key="d.value"
	        :label="d.label"
	        :value="d.value"
	      /> -->
	    </el-select>
	  </el-form-item>	
	  <el-form-item label="班级" prop="xsClassj">
	    <el-select v-model="queryParams.bjid" @change="classChange" placeholder="请选择班级">
<!-- 	  	<el-option
	  	  v-for="c in classList2"
	  	  :key="c.value"
	  	  :label="c.label"
	  	  :value="c.value"
	  	/> -->
	    </el-select>
	  </el-form-item>
	</el-form>
	
	<div id="main" style="width: 98%;height:400px;"></div>
  </div>
	
</template>

<script setup name="tcfx">
import * as echarts from 'echarts';
import { getToken } from "@/utils/auth";
import request from '@/utils/request'
import useUserStore from "@/store/modules/user";


const userStore = useUserStore();
const isXxidFlag=ref(false);
const userinfo = reactive({
  token: userStore.token,
  id: userStore.id,
  name: userStore.name,
  avatar: userStore.avatar,
  roles: userStore.roles,
  permissions: userStore.permissions
});	
const myChart=ref();
const data = reactive({
  form: {},
  queryParams: {
    xxid: null,
    bjid: null
  },
  rules: {
	  xxid: [
	    { required: true, message: "学校不能为空", trigger: "change" }
	  ],
	  bjid: [
	    { required: true, message: "班级不能为空", trigger: "change" }
	  ]
	  
  }
});

const { queryParams, form, rules } = toRefs(data);


 onMounted(() => {
	 console.log(0)
	 
	      // console.log('组件已经挂载')
	 	  console.log(1)
	 	  console.log(echarts)
	 	  // 基于准备好的dom，初始化echarts实例
	 	  myChart.value = echarts.init(document.getElementById('main'));
	 	  // 绘制图表
	 	  myChart.value.setOption({
	 	    title: {
	 	      text: 'ECharts 入门示例'
	 	    },
	 	    tooltip: {},
	 	    xAxis: {
	 	      data: ['优秀', '良好', '及格', '不及格']
	 	    },
	 	    yAxis: [
	 			{
	 				type: 'value',
	 				name: '人数',
	 				min: 0,
	 				// max: 100,
	 				position: 'left',
	 				axisLabel: {
	 					formatter: '{value} 人'
	 				}
	 			}
	 		],
	 	    series: [
	 	      {
	 	        name: '男',
	 	        type: 'bar',
	 	        data: [5, 20, 36, 10]
	 	      },
	 	      {
	 	        name: '女',
	 	        type: 'bar',
	 	        data: [5, 20, 36, 10]
	 	      }
	 	    ]
	 	  });
	 
 })
 function schoolChange(e){
 	// classList2.value= classList.value.filter(function(currentValue,index,arr){
 	// 	// console.log(currentValue)
 	// 	return currentValue.xxid == e ;
 	// });
 	
 	// if(classList2.value.length==0){
 	// 	queryParams.value.sjBjid=null;
		// queryParams.value.sjNjid=null;
 	// }else{
 	// 	queryParams.value.sjBjid=classList2.value[0].value;
		// queryParams.value.sjNjid=classList2.value[0].nj;
 	// }
 } 
 function classChange(e){
	//  // console.log(classList2.value)
	//  let tmp= classList2.value.filter(function(currentValue,index,arr){
	//  	// console.log(currentValue)
	//  	return currentValue.value == e ;
	//  });
	// queryParams.value.sjNjid=tmp[0].nj;
 }












function getTest() {
	  return request({
	    url: '/tc/test',
	    method: 'get',
	    params: ''
	  })
};
function test(){
	getTest().then(res => {
	  console.log(res)
	});
}
test();
</script>

<style>
</style>